<template>
  <div>
    <!-- 轮播图 -->
   <!-- <slider :imgs="imgs"></slider> -->

    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="(item,i) in imgs" :key="i">
       <!-- <a>
          <img :src="item.src" alt="">
       </a> -->
      </mt-swipe-item>
    </mt-swipe>

    <!-- 九宫格 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newslist">
              <img src="../../images/menu3.png" alt="">
              <div class="mui-media-body">新闻资讯</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photoshare">
             <img src="../../images/menu4.png" alt="">
              <div class="mui-media-body">图片分享</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/goodsBuy">
              <img src="../../images/menu5.png" alt="">
              <div class="mui-media-body">商品购买</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="">
             <img src="../../images/menu6.png" alt="">
              <div class="mui-media-body">留言反馈</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="">
             <img src="../../images/menu9.png" alt="">
              <div class="mui-media-body">视频专区</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="">
             <img src="../../images/menu10.png" alt="">
              <div class="mui-media-body">联系我们</div></router-link></li>
    </ul> 
  </div>
</template>

<script>
  import config from "../../js/globalConfig.js" 

  // 引入轮播图组件
  import slider from "../common/slider.vue"
  
  export default {
    data() {
      return {
        imgs:[
          {src:"../../images/1.jpg"},
          {src:"../../images/2.jpg"},
          {src:"../../images/3.jpg"}
        ],
        path:config.path
      }
    },
    created() {
      this.getLunboList();
    },
    methods: {
      getLunboList() { 
        // 设置了根目录之后，路径前不能加"/"
        this.$http.get("api/getlunbo").then(res=>{
          // console.log(res.body.message);
          res.body.message.map(val=>{
            val.img = this.path+val.img;
          })
          this.imgs = res.body.message;
        })
      }
    },
    // 注册轮播图组件为首页组件的子组件
    // components: {slider}
  }
</script>

<style lang="scss" scoped>
 
  .mui-media img {
    width:60px;
  }
  .mui-table-view {
    border-top:none;
    border-left:none;
    background-color: #fff;
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell {
    border:none;
  }

// 私有轮播图
   .mint-swipe {
    height:200px;
    overflow: hidden;
  }
  .mint-swipe-items-wrap div:nth-child(1) {
    background-image: url("../../images/1.jpg");
    background-size: cover;
    // background-color: red;
  }
  .mint-swipe-items-wrap div:nth-child(2) {
    background-image: url("../../images/2.jpg");
    background-size: cover;
  }
  .mint-swipe-items-wrap div:nth-child(3) {
    background-image: url("../../images/3.jpg");
    background-size: cover;
  }

  // .mint-swipe-item img {
  //   /* width:100%; */
  //   height:100%
  // }
</style>


